<template>
  <div class="money">
    <div class="bgcolor"></div>
    <h4 class="title">--理财精选--</h4>
    <div class="item-groud">
    <div class="item" v-for="(item,index) in items" :key="index">
      <router-link :to="{name:item.href}">
      <h4>{{item.title}}<em>{{item.sub}}</em></h4>
      <p>{{item.rate}}</p>
      <span>{{item.text}}</span>
      </router-link>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homeMoney',
  data () {
    return {
      items: [
        {
          href: 'home',
          title: '定期理财',
          sub: '理财首选',
          rate: '5.6%',
          text: '历史年化回报率'
        },
        {
          href: 'home',
          title: '小白理财',
          sub: '理财首选',
          rate: '4.22%',
          text: '7日年化收益率'
        },
        {
          href: 'home',
          title: '月月盈',
          sub: '养老保障',
          rate: '5%',
          text: '七日年化收益率'
        },
        {
          href: 'home',
          title: '小白基金',
          sub: '天天赚钱',
          rate: '4.27%',
          text: '7日年化收益率'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/css/varibles.styl'
  @import '../../assets/css/mixins.styl'
  .bgcolor
    pdTop()
  .title
    jdTitle()
  .item-groud
    overflow:hidden
    .item
       width:50%
       box-sizing:border-box
       overflow:hidden
       float:left
       padding:.2rem 7%
     div.item:nth-child(1),div.item:nth-child(3)
       border-right:1px solid #ddd
       border-bottom:1px solid #ddd
     div.item:nth-child(2), div.item:nth-child(4)
        border-bottom:1px solid #ddd
     h4
       font-size:.28rem
       font-weight:700
       line-height:.6rem
       color:#000
      em
       color:red
       font-size:.24rem
       border:.02rem solid red
       padding:.04rem
       border-radius:.1rem
       margin-left:.1rem
     p
      color:red
      font-size:.4rem
      font-weight:bold
      line-height:.8rem
     span
      color:#999
</style>
